<template>
  <div class="tableArea">
    <table class="info-table">
      <tr>
        <th>店铺名称</th>
        <td>{{ InfoTable.shopName }}</td>
        <th>所属机构</th>
        <td>{{ InfoTable.orgName }}</td>
      </tr>
      <tr>
        <th>收款人姓名</th>
        <td>{{ InfoTable.shopManager }}</td>
        <th>证件类型</th>
        <td>{{ InfoTable.certificateType | idCardList }}</td>
      </tr>
      <tr>
        <th>收款人手机号</th>
        <td>{{ InfoTable.phone }}</td>
        <th>证件号码</th>
        <td>{{ InfoTable.certificateNo }}</td>
      </tr>
      <tr>
        <th>当前绑定银行卡卡号</th>
        <td>{{ InfoTable.bankNo }}</td>
        <th>证件照片</th>
        <td class="personalPic"><span @click="openImgModel">查看</span></td>
      </tr>
      <tr>
        <th>当前绑定银行卡开户银行</th>
        <td>{{ InfoTable.bankName }}</td>
        <th>收入来源</th>
        <td>{{ InfoTable.incomeSource }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: "infoTable",
  components: {},
  props: {
    InfoTable: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    idCardList(item) {
      switch (item) {
        case "A":
          return "身份证";
        case "E":
          return "港澳居民往来大陆通行证";
        case "F":
          return "台湾居民往来大陆通行证";
      }
    },
  },
  data() {
    return {};
  },
  methods: {
    openImgModel() {
      this.$emit("openImgModel");
    },
  },
};
</script>
<style scoped lang="less">
.tableArea {
  width: 100%;
  display: flex;
  justify-content: center;
  .info-table {
    // flex: 1;
    width: 90%;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    tr {
      border-top: 1px solid #e8e8e8;
      th,
      td {
        padding: 16px 16px;
        overflow-wrap: break-word;
        border-left: 1px solid #e8e8e8;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        text-align: center;
      }
      th {
        background: #fafafa;
        width: 20%;
      }
      td {
        color: rgba(0, 0, 0, 0.65);
        width: 30%;
      }
      .personalPic {
        span {
          color: #1890ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>